Hexo+GitHub Pages+Mweb搭建博客

更新于2020-01-25 添加Hexo的Git管理

花了两三个小时终于将自己的博客搭建好了，下面就分享一下整个过程。
由于我自己本来Mac上就装了Homebrew，所以就省略了安装Homebrew的过程了。直接从安装nvm开始。

nvm and node

使用nvm安装node

安装nvm

1	brew install nvm

如果安装成功，使用nvm命令会出现如下的提示： nvm_success

配置nvm

修改~/.bash_profile文件，如果不存在，新建.bash_profile文件

1 2	cd ~ vim .bash_profile

当然你也可以使用open .bash_profile进行修改。接着在.bash_profile添加下面的命令：

1 2	export NVM_DIR=~/.nvm source $(brew --prefix nvm)/nvm.sh

重新source

1	source .bash_profile

open .zshrc打开文件后，在最后添加一句source ~/.bash_profile。不然每次打开窗口都要重新source一下。

安装node

node安装命令如下：

nvm ls-remote 查看所有版本
nvm install xxx 下载你想要的版本
nvm use xxx 使用指定版本的node
nvm alias default xxx 每次启动终端都使用该版本

这里我安装了v11.3.0版本 node_install

查看node是否安装命令：node -v和npm -v。
node_success

Hexo and GitHub Pages

安装Hexo

全局安装Hexo

1	npm install -g hexo

初始化Hexo

1	hexo init NeroBlog

npm install

初始化成功，在NeroBlog目录下，使用
npm install

查看安装成功

使用hexo s，在浏览器中打开localhost:4000能看到Hexo页面表示安装成功。Ctrl+C关闭hexo server。

关联GitHub

登录你的GitHub帐号，新建仓库并命名： create_repository
这里这么写也是可以的，但是这么最好不要这么写，后面我们会更换域名，还是要使用用户名.github.io的写法。（我自己的博客就是使用YiHuaXie.github.io）

修改_config.yml文件

cd到写博客的文件夹下（我这里就是NeroBlog），编辑_config.yml文件，在编辑_config.yml文件的时候要注意冒号后面要空一格。

修改deploy如下：

deploy:
  type: git
  repository: git@github.com:YiHuaXie/YiHuaXie.github.io.git
  branch: master

生成静态页面

使用hexo g生成静态页面，这里可能会出现错误，但是我安装的时候没有。

上传

使用hexo d就会将你的页面上传到GitHub上的对应仓库里。执行hexo d报错的话使用npm install hexo-deployer-git --save应该就能解决。

如果你没有关联GitHub，则执行hexo d时终端会提示你输入GitHub的用户名和密码。

成功结果如下： hexo_deploy_success

返回GitHub仓库

返回GitHub仓库，点击Settings。在GitHub Pages那一栏的source选择对应分支并保存。 github_page_source
保存后要稍微等一会会出现： github_pages_success
这就是我们最终生成的博客地址。

打开后发现有内容但是没有样式，这里就是一个巨坑，害得我仓库重建了好几次。

填坑

打开_config.yml文件，找到root修改为root: /blogtest并保存。

接着使用（每次博客修改后都要执行下面的命令）

1
2
3

hexo clean
hexo g
hexo d

再次打开上面的链接就和localhost:4000h看到的页面效果一样了。

使用Mweb

图片上传问题

可以直接使用本地图片，这里我是上传到阿里云上面的。七牛云作为图床比较麻烦，主要是默认给你的前缀是测试的只有一个月有效期。不然就要备案什么的巨麻烦。

Mweb关联Hexo

现在我们只需要关联一下source文件夹即可。具体做法如下：

CMD + E或者选择文件->打开外部模式；
点击左下角的➕，选择引入文件夹，将博客目录下的source文件引进来；
右键该文件夹选择编辑；
可以修改显示名称，不会影响真实的文件夹名；保存拖入的图片的文件夹名称这里我将文件夹名称去掉了；

这样就可以大功告成了。

Hexo的Git管理

在很长的一段时间，我都使用一台电脑来管理这个博客项目。这是很麻烦的，所以还是需要Git的帮助让我可以在多台设备上管理。

创建新的Git仓库

在yourname.github.io的master分支上的都是Hexo发布后的产物即编译之后的静态页面，里面并没有我们的项目文件，所以需要额外创建一个Git仓库或者在yourname.github.io下新建一个分支，专门管理Hexo项目。

注意点1：如果你是用yourname.github.io下新建一个分支的方式，在拉取分支（该分支肯定是基于Master分支拉的分支，并且Master分支上已经有产物）后，需要将除了.git文件夹以外的所有文件全部删除，这个分支与master是完全独立的。

这里我使用了新建仓库的方式，该仓库就叫做Blog，这么做也是为了方面GitHub Actions的自动部署。

资源拷贝

将以下几个文件/文件夹拷贝到新仓库或者新分支中

package.json
.gitignore
themes
source
scaffolds
_config.yml

注意点2：如果你的主题是从GitHub上克隆下来的比如Next主题，那么该文件夹下就会存在.git文件夹，需要将它移除，否则这个主题就不会进入我们Blog的Git管理内容中。其他文件夹下也找一下，如有必要，删除.git文件夹。

到这里我们重新编译一下这个项目：

# 安装依赖
npm install

hexo clean
hexo g
hexo s

这样我们就可以在本地看到我们的项目，和之前肯定是一样的。

提交分支和新设备管理

关于提交分支就按着正常的流程来走，这里就不再说了。如果是新设备需要管理该项目的话只要将管理项目的仓库或者分支克隆下来，使用上面的命令就可以。

注意点3：使用hexo指令后产生的产物一般都是git忽略的，另外使用hexo d进行发布的时候只要确保_cofig.yml的deploy配置还是yourname.github.io的master分支就可以。

使用GitHub Actions 自动部署 Hexo 博客

通过GitHub Actions的配置我们不再需要手动执行hexo clean、hexo d等操作，只需要将修改内容push至远程仓库即可完成网页的更新。

准备仓库

yourname.github.io作为公有仓库存放编译之后的静态页面
私有仓库用来存储Hexo项目源代码

秘钥配置

通过ssh-keygen -t rsa -C "Blog Deploy Key"生成一对秘钥。

私有仓库配置私钥

在 GitHub 上打开私有仓库即保存 Hexo 项目代码的仓库，访问 Settings -> Secrets -> Actions，选择 New repository secret 开始创建 Actions secrets。

Name：可以随意填写，但是会在 GitHub Actions Workflow 用到，一定不能写错。
Value：私钥对应的内容

公有仓库配置公钥

在 GitHub 上打开公有仓库即yourname.github.io所在的仓库，访问 Settings -> Deploy keys，选择 Add deploy key 开始创建 Deploy keys。

Title：可以随意填写
Key：公钥对应的内容
勾选 Allow write access选项

添加Actions配置文件

在你的 Hexo 项目根目录下创建 .github 文件夹。
在 .github 文件夹下创建 workflows 文件夹。
在 workflows 文件夹下创建 xxx.yml 文件。

上述三个流程也可以通过Actions下的 New workflow 来完成配置。

xxx.yml的内容配置如下：

name: HEXO DEPLOY
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout              
      uses: actions/checkout@v2
      with:
        ref: master

    - name: Setup Node        
      uses: actions/setup-node@v1
      with:
        node-version: "13"

    - name: Config Key
      env:
        ACTION_DEPLOY_KEY: ${{ secrets.HEXO_DEPLOY_KEY }}
      run: |
        mkdir -p ~/.ssh/
        echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
        chmod 700 ~/.ssh
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        git config --global user.email "xyh30902@163.com"
        git config --global user.name "NeroXie"

    - name: NPM install       
      run: |
        npm install hexo-cli -g
        npm install

    - name: Hexo Deploy           
      run: |
        hexo clean
        hexo g
        hexo d

至此，GitHub Actions 自动部署的准备工作已经完成。

触发自动部署

修改你的博客源代码；
将修改的代码push到私有仓库的master分支上（配置项指定了master分支才会触发自动构建）；
GitHub Actions 检测到 master 分支有内容更新，会自动执行配置文件的命令，将 Hexo 项目编译成静态页面，然后部署到公有仓库中。

私有仓库的 Actions